<template>
	<view class="">
		<view class="head_top">
			<view class="head_area">
				<image class="head_img" src="@/static/area.png"></image>
				<view class="head_r">
					<view class="head_r_user">用户昵称：78945612345</view>
					<view class="head_r_phone">手机号：17614035858</view>
				</view>
			</view>
		</view>
		<view class="me_cell_al">
			<view class="me_cell">
				<view class="me_cell_top">
					<view class="balance">账户余额</view>
					<view class="Payouts">
						<view class="Payouts_l" @click="toPath('/pages/embody/records')">提现记录</view>
						<image class="Payouts_r" src="@/static/right.png"></image>
					</view>
				</view>
				<view class="me_money">￥9999.36</view>
				<view class="Payouts_al">
					<view class="Payouts_btn" @click="toPath('/pages/embody/embody')">去提现</view>
				</view>
			</view>
			<view class="bottomse">
				<view class="bottomse_top">其他功能</view>
				<view class="bottom_top">
					<view class="bottomse_bo" v-for="(item,index) in list" :key="index" @click="toList(item)">
						<image class="bottomse_img" :src="item.img" mode="heightFix"></image>
						<view class="bottomse_size">{{item.title}}</view>
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					img: require('@/static/img/set-4.png'),
					title: '配送'
				}, {
					img: require('@/static/img/servsaa.jpg'),
					title: '客服'
				}, {
					img: require('@/static/img/set-3.png'),
					title: '设置'
				}]
			}
		},
		methods: {
			toPath(path) {
				uni.navigateTo({
					url: path
				})
			},
			toList(e) {
				if (e.title == '配送') {
					uni.navigateTo({
						url: '/pages/me/Distribution'
					})
				} else if (e.title == '客服') {
					uni.navigateTo({
						url: '/pages/customer-service/customer-service'
					})
				} else if (e.title == '设置') {
					uni.navigateTo({
						url: '/pages/set/set'
					})
				}
			}
		}
	}
</script>
<style>
	page {
		background: #F4F5F7;
	}
</style>
<style scoped lang="scss">
	.head_top {
		height: 500rpx;
		background-image: url('@/static/me_bg.png');

		.head_area {
			display: flex;
			align-items: center;
			padding: 180rpx 0rpx 0rpx 40rpx;

			.head_img {
				width: 140rpx;
				height: 140rpx;
				padding: 5rpx;
				background: #FFF;
				border-radius: 20rpx;
				margin-right: 30rpx;
			}

			.head_r {
				.head_r_user {
					margin-bottom: 30rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #333;
				}

				.head_r_phone {
					font-size: 28rpx;
					font-weight: 400;
					color: #333;
				}
			}
		}
	}

	.me_cell_al {
		padding: 0rpx 20rpx;

		.me_cell {
			padding: 20rpx 20rpx 10rpx 20rpx;
			margin: -150rpx 0rpx 20rpx 0rpx;
			height: 300rpx;
			border-radius: 10rpx;
			background: #FFF;

			.Payouts {
				display: flex;
				align-items: center;

				.Payouts_l {
					margin-right: 6rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #999;
				}

				.Payouts_r {
					width: 14rpx;
					height: 14rpx;
				}
			}
		}

		.me_cell_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40rpx;

			.balance {
				font-size: 28rpx;
				font-weight: 400;
				color: #333;
			}
		}

		.me_money {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;
			font-size: 48rpx;
			font-weight: 500;
			color: #333;
		}

		.Payouts_al {
			display: flex;
			align-items: center;
			justify-content: center;

			.Payouts_btn {
				width: 160rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F3060D;
				border-radius: 50rpx;
				color: #FFF;
			}
		}

		.bottomse {
			padding: 20rpx 20rpx 30rpx 20rpx;
			background: #FFF;
			border-radius: 10rpx;

			.bottomse_top {
				margin-bottom: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333;
			}

			.bottomse_bo {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-right: 130rpx;

				.bottomse_img {
					// width: 56rpx;
					height: 56rpx;
					margin-bottom: 5rpx;
				}

				.bottomse_size {
					font-size: 28rpx;
					font-weight: 400;
					color: #666;
				}
			}

			.bottom_top {
				display: flex;
				align-items: center;
			}
		}
	}
</style>